<template>
    <div>
        <div class="tab-background">
            <div class="tabs">
                <div
                    class="tab"
                    v-for="(tab, index) in tabs"
                    :key="index"
                    @click="activateTab(index)"
                    :class="{ 'active': activeTab === index }"
                >
                    <span :class="{ 'tabText': activeTab === index }">{{ tab.name }}</span>
                    <transition name="line">
                        <div class="tab-line" v-show="activeTab === index"></div>
                    </transition>
                </div>
            </div>
        </div>
        <div class="tab-content" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }">
            <div class="tab-item-background" v-for="(item, index) in tab.content" :key="item">
                <div class="tab-item-tabs">
                    <span>NO.{{ index + 1 }}</span>
                    <span class="name" @click="openLinkInNewWindow(item)">{{ item.name }}</span>
                    <span class="highlight">
                        {{ item.valule }}
                        {{
                            tab.name === '展览' || tab.name === '活动'
                                ?'个'
                                : (
                                    tab.name ==='活跃度'
                                        ? ''
                                        :(
                                            tab.name ==='文创'
                                            ?'件'
                                            :'(件/套)'
                                        )
                                )
                        }}
                    </span>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    props: ['childMessage'],
    data() {
        return {
            activeTab: 0,
            tabs: [
                {name: '藏品', content: []},
                {name: '展览', content: []},
                {name: '活动', content: []},
                {name: '文创', content: []},
                {name: '活跃度', content: []},
                // { name: '客流', content: 'NO.6' },
            ]
        }
    },
    mounted() {
        this.$nextTick(() => {
            console.log(JSON.parse(JSON.stringify(this.childMessage)), "this.childMessage");
            // 藏品
            this.tabs[0].content = this.childMessage.collectionRanking;
            // 展览
            this.tabs[1].content = this.childMessage.spreadtrumRanking;
            // 活动
            this.tabs[2].content = this.childMessage.activityRanking;
            // 文创
            this.tabs[3].content = this.childMessage.wenchuangRanking;
            // 活跃度
            this.tabs[4].content = this.childMessage.huoyueduRanking;
        });
    },
    methods: {
        activateTab(index) {
            this.activeTab = index;
        },
        // 打开博物馆详情
        openLinkInNewWindow(item) {
            console.log(JSON.parse(JSON.stringify(item)), "openLinkInNewWindow");

            // 修改导航当前页面类型
            this.$store.commit('museumInformation/SET_CurrentPage', 2);

            this.$router.push({
                path: '/revolutionaryMemorial',
                query: {
                    id: item.id,
                    cityId: item.orgId,
                    name: item.name,
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.tab-background {
    width: 526px;
    height: 30px;
    margin-top: 40px;
    background-image: url("../../assets/img/LeaderboardTitle.png");
    background-size: cover;
    .tabs {
        display: flex;
        justify-content: space-between;
        margin: 0px 20px 0px 20px;
        .tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            color: #8cbee7;
            flex: 1;
            text-align: center;
            padding: 0px 10px 0px 10px;
            cursor: pointer;
        }
        .tab-line {
            /*position: absolute;*/
            /*bottom: 0;*/
            /*left: 0;*/
            margin-top: 12.5px;
            width: 22px;
            height: 3.2px;
            background-color: #fed9a6;
            box-shadow: 0px 0px 4px 0.95px rgb(255, 188, 0);
            transform-origin: 50% 50%;
        }
    }
}

.tab-content {
    //border: 1px solid #007bff;
    //padding: 20px;
    padding-top: 12px;
    display: none;
    .tab-item-background{
        display: flex;
        justify-content: center;
        width: 526px;
        height: 31px;
        margin-top: 20px;
        background-image: url("../../assets/img/LeaderboardContent.png");
        background-size: cover;
        .tab-item-tabs{
            display: flex;
            justify-content: space-between;
            width: 408px;
            line-height: 30px;
            .highlight{
                color: #edbe7e;
            }

            .name {
                width: 240px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                cursor: pointer;
            }
        }
        &:nth-child(even){
            color: #c8e4fa;
        }
    }
}

.tab-content.active {
    display: block;
}

.tabText{
    color: #fff;
    font-weight: 900;
}

.line-enter-active,
.line-leave-active {
    transition: transform 0.3s;
}

.line-enter,
.line-leave-to {
    transform: scaleX(0);
}
</style>
